import { Button, Input, Popconfirm, Tag, Form } from "antd";
import {
  FieldTimeOutlined,
  DeleteOutlined,
  EyeOutlined,
} from "@ant-design/icons";
import CommonPage from "@/components/page/CommonPage";
import styled from "styled-components";
import DeleteTwo from "@/components/svg/action-slot-icon/Delete_Two";
import CrudTable from "@/components/table/CrudTable";
import QueryBarItem from "@/components/query-bar/QueryBarItem";
import { useEffect, useRef } from "react";
import useGetState from "@/hooks/useGetState";
import { formatDate } from "@/utils/common/common";
import useCRUD from "@/hooks/useCRUD";
import { deleteOperationLogs, getOperationLogs } from "@/api/operationlog";
import CrudModal from "@/components/table/CrudModal";
import copy from "copy-to-clipboard";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import {
  vscDarkPlus,
  coyWithoutShadows,
  darcula,
} from "react-syntax-highlighter/dist/esm/styles/prism"; // 代码高亮主题风格

import useMyContext from "@/hooks/useContext";

const Styled = styled.div``;

const Operation = () => {
  const $table = useRef();
  const [queryItems, setQueryItems, getQueryItems] = useGetState({});
  const { messageApi } = useMyContext();
  const {
    modalVisible,
    setModalVisible,
    modalLoading,
    setModalLoading,
    handleDelete,
    modalForm,
    setModalForm,
    modalFormRef,
    handleView,
    clearFormFields,
    setTableSelections,
    tableSelections,
  } = useCRUD({
    name: "日志",
    doDelete: deleteOperationLogs,
    refresh: () => $table.current.handleSearch(),
  });

  // 请求方法对应不同类型的标签 (计算属性传参)
  function tagType(type) {
    switch (type) {
      case "GET":
        return "processing";
      case "POST":
        return "success";
      case "PUT":
        return "warning";
      case "DELETE":
        return "error";
      default:
        return "processing";
    }
  }
  function updateQueryItems(newQueryItems) {
    console.log("更新query", newQueryItems);
    setQueryItems(newQueryItems);
  }
  const columns = [
    {
      title: "系统模块",
      key: "opt_module",
      width: 70,
      align: "center",
      ellipsis: true,
      render(_, record) {
        return <span>{record.opt_module}</span>;
      },
    },
    {
      title: "操作类型",
      key: "opt_type",
      width: 70,
      align: "center",
      ellipsis: true,
      render(_, record) {
        return <span>{record.opt_type}</span>;
      },
    },
    {
      title: "请求方法",
      key: "request_method",
      width: 80,
      align: "center",
      ellipsis: { tooltip: true },
      render(_, record) {
        return (
          <Tag color={tagType(record.request_method)}>
            {record.request_method}
          </Tag>
        );
      },
    },
    {
      title: "操作人员",
      key: "nickname",
      width: 80,
      align: "center",
      ellipsis: true,
      render(_, record) {
        return <span>{record.nickname}</span>;
      },
    },
    {
      title: "登录IP",
      key: "ip_address",
      width: 80,
      align: "center",
      ellipsis: true,
      render(_, record) {
        return <span>{record.ip_address}</span>;
      },
    },
    {
      title: "登录地址",
      key: "ip_source",
      width: 80,
      align: "center",
      ellipsis: true,
      render(_, record) {
        return <span>{record.ip_address}</span>;
      },
    },
    {
      title: "发布时间",
      key: "created_at",
      align: "center",
      width: 80,
      render(text, record, index) {
        return (
          <Button
            type="link"
            icon={<FieldTimeOutlined />}
            size="small"
            style={{ color: "#333" }}
          >
            {formatDate(record.created_at)}
          </Button>
        );
      },
    },
    {
      title: "操作",
      key: "actions",
      width: 120,
      align: "center",
      fixed: "right",
      render(text, record, index) {
        return (
          <>
            <Button
              type="primary"
              icon={<EyeOutlined />}
              style={{
                marginRight: "5px",
                backgroundColor: "gold",
              }}
              onClick={async () => {
                handleView(record);
              }}
            >
              查看
            </Button>
            <Popconfirm
              title="确认删除吗"
              onConfirm={() => {
                handleDelete([record.id]);
              }}
              okText="确认"
              cancelText="取消"
            >
              <Button
                type="primary"
                icon={<DeleteOutlined />}
                style={{ backgroundColor: "#D03050FF" }}
              >
                删除
              </Button>
            </Popconfirm>
          </>
        );
      },
    },
  ];

  //实现复制
  function copyFormatCode(code) {
    copy(code);
    messageApi.success("复制成功！");
  }

  useEffect(() => {
    $table.current.handleSearch();
  }, []);

  return (
    <Styled>
      <CommonPage title="操作日志">
        <div className="action-slot" slot="action">
          <Button
            type="primary"
            icon={<DeleteTwo />}
            danger
            onClick={() => handleDelete(tableSelections)}
          >
            批量删除
          </Button>
        </div>
        <CrudTable
          ref={$table}
          columns={columns}
          queryItems={queryItems}
          updateQueryItems={updateQueryItems}
          getQueryItems={getQueryItems}
          getData={getOperationLogs}
          setTableSelections={setTableSelections}
        >
          <div className="queryBar-slot flex label-ml-15" slot="queryBar">
            <QueryBarItem label="模块名" labelWidth={50}>
              <Input
                placeholder="请输入模块名或描述"
                value={queryItems.keyword}
                onChange={(e) => {
                  setQueryItems({
                    ...queryItems,
                    keyword: e.target.value,
                  });
                }}
              />
            </QueryBarItem>
          </div>
        </CrudTable>

        <CrudModal
          visible={modalVisible}
          setModalVisible={setModalVisible}
          title="日志详情"
          showFooter={false}
        >
          <Form
            form={modalFormRef}
            name="operation"
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 20,
            }}
          >
            <Form.Item label="操作模块: " name="opt_module">
              {modalForm.opt_module}
            </Form.Item>
            <Form.Item label="请求地址: " name="opt_url">
              {modalForm.opt_url}
            </Form.Item>
            <Form.Item label="请求方法:" name="request_method">
              <Tag color={tagType(modalForm.request_method)}>
                {modalForm.request_method}
              </Tag>
            </Form.Item>
            <Form.Item label="操作类型: " name="opt_type">
              {modalForm.opt_type}
            </Form.Item>
            <Form.Item label="操作方法: " name="opt_method">
              {modalForm.opt_method}
            </Form.Item>
            <Form.Item
              label="请求参数: "
              name="request_param"
              style={{ overflow: "hidden" }}
            >
              <Button
                type="text"
                onClick={copyFormatCode.bind(null, modalForm.request_param)}
              >
                {modalForm.request_param}
              </Button>
            </Form.Item>
            <Form.Item label="返回数据: " name="response_data">
              <SyntaxHighlighter
                onClick={copyFormatCode.bind(null, modalForm.response_data)}
                showLineNumbers={true} // 是否展示左侧行数
                lineNumberStyle={{ color: "#ddd", fontSize: 10 }} // 左侧行数的样式
                style="coyWithoutShadows" // 主题风格
                language="javascript" // 需要语言类型 如css, jsx , javascript 等
                PreTag="div"
              >
                {modalForm.response_data}
              </SyntaxHighlighter>

              {/* <Button
                type="text"
                onClick={copyFormatCode.bind(null, modalForm.response_data)}
              >
                {modalForm.response_data}
              </Button> */}
            </Form.Item>
          </Form>
        </CrudModal>
      </CommonPage>
    </Styled>
  );
};

export default Operation;
